{% extends 'base.html' %}

{% block title %}

{% if approving %}
Vacations
{% else %}
My Vacations
{% endif %}

{% endblock %}

{% block main_content %}
<div class="box box-primary">
    <div class="box-header with-border">
        <i class="fa fa-black-tie"></i>
        <h3 class="box-title">Vacations</h3>
    </div>
    <div class="box-body">
        {% if vacations %}
            <table class="table table-bordered ">
                <thead>
                    <tr>
                        <th> Start Date </th>
                        <th> End Date </th>
                        <th> Details </th>
                        <th> Requester </th>
                        <th> Passport Expiry </th>
                        <th> Approval Status </th>
                        <th> Approved By </th>
                        <th> Approved At </th>
                    </tr>
                </thead>
                <tbody>
                    {% for vacation in vacations %}
                    <tr>
                        <td>{{ vacation.start_date }}</td>
                        <td>{{ vacation.end_date }}</td>
                        <td>{{ vacation.details }}</td>
                        <td>{{ vacation.requester.username }}</td>
                        <td>{{ vacation.passport_expiry_date }}</td>
                        <td>{{ vacation.approval_status }}</td>
                        <td>{{ vacation.approved_by.username }}</td>
                        <td>{{ vacation.approved_at }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
        <p>
            You have no vacation requests
        </p>
        {% endif %}
    </div>
    <div class="box-footer">
        {% if perms.auth.no_permission %}
        <a href="{% url 'example:vacation:start' %}" class="btn btn-default">
            <span class="glyphicon glyphicon-edit"></span> Fill a vacation request
        </a>
        {% endif %}

        <a href="{% url 'example:index' %}" class="btn btn-default">
            <span class="glyphicon glyphicon-home"></span> Home
        </a>
    </div>
</div>
{% endblock main_content %}
